<template>
  <view class="product-box">
    <view class="title">
      <text style="font-weight: 700; font-size: 0.85rem">已选产品</text>
    </view>
    <view
      v-for="(item, index) in store.useOrderStore.selectGoods"
      :key="index"
      class="des"
    >
      <view class="image-box">
        <image :src="item.skuInfo.image" mode="scaleToFill" />
      </view>

      <view class="text-box">
        <view class="name txt">{{ item.skuInfo.description }}</view>
        <view class="selected txt">
          <text>已选</text>
          <text v-for="(item1, index1) in item.skuItem" :key="index1">{{
            '\t' + item1.attrValue
          }}</text>
        </view>

        <!-- <view class="price-box txt">
                <view class="price">
                  <text class="mark">￥</text>
                  <text class="yg-price">21.9</text>
                </view>
              </view> -->

        <view class="price-box txt">
          <view class="price">
            <text class="mark">￥</text>
            <text class="yh-price">{{
              (item.skuInfo.price * item.number).toFixed(2)
            }}</text>
          </view>
          <view class="count-box">
            <view class="number">x {{ item.number }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <view class="cost-box">
    <view class="ul">
      <view class="li">
        <text class="txt">打包费</text>
        <text class="price">￥1</text>
      </view>
      <view class="li">
        <text class="txt">配送费</text>
        <text class="price">￥1</text>
      </view>
      <view class="li">
        <text class="txt">总价</text>
        <text class="price">￥{{ store.useOrderStore.computePrice }}</text>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { number } from 'echarts'
import { arrayBuffer } from 'stream/consumers'
import { toRefs, watch, PropType, onMounted } from 'vue'
import { ref, reactive, getCurrentInstance, nextTick } from 'vue'

import myIcon from '@/components/icon/src/font/my-icon.vue'

import cvStepper from '@/components/stepper/src/cv-stepper.vue'

import { useStore } from '@/store'

const store = useStore()

const emit = defineEmits(['selectItemHandle', 'submitSelectHandle'])
const props = defineProps({
  list: {
    type: Array<any>,
    default: '',
  },
})

const { list } = toRefs(props)

const calendarView = ref()

const showWin = ref(false)

const sku = reactive({
  goodsNumber: 1,
  list: [] as Array<any>,
})

const close = () => {
  showWin.value = false
}

const open = () => {
  showWin.value = true
}

watch(
  () => store.useOrderStore.selectGoods.length,
  (n: number) => {
    if (n === 0) {
      showWin.value = false
    }
  }
)

const numberChange = (e: number, item: any) => {
  console.log(e, item)

  if (e === 0) {
    store.useOrderStore.removeGoods(item.key)
  }
}

const clearAllGoodsHandle = () => {
  store.useOrderStore.clearAllGoods()
  showWin.value = false
}

defineExpose({
  close,
  open,
})
</script>
<style lang="scss" scoped>
.product-box {
  width: 100%;
  height: auto;
  background-color: #fff;

  position: relative;
  bottom: 0px;
  border-radius: 30rpx;
  box-sizing: border-box;
  padding: 30rpx;
  overflow: hidden;

  > .title {
    width: 100%;
    display: flex;
    position: relative;
    margin-bottom: 20rpx;

    .del {
      position: absolute;
      right: 0;
      display: flex;
      align-items: center;

      .del-txt {
        margin-right: 20rpx;
      }
    }
  }

  .des {
    width: 100%;
    height: auto;
    display: flex;
    margin-bottom: 20rpx;

    .image-box {
      width: 175rpx;
      height: 175rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20rpx;

      > image {
        width: 100%;
        height: 100%;
        border-radius: 20rpx;
      }
    }
    .text-box {
      width: calc(100% - 175rpx);
      margin-left: 30rpx;
      .txt {
        margin-bottom: 20rpx;
        color: #1a1a1a;
        font-size: 1rem;
      }

      .name {
        font-weight: 700;
      }
    }
    .selected {
      color: #9e9e9e;
      font-size: 0.7rem;

      > text {
        color: #9e9e9e;
        font-size: 0.7rem;
      }
    }

    .price-box {
      width: 100%;
      display: flex;
      position: relative;
      .price {
        color: #fe1c00;

        font-size: 1rem;
        .mark {
          font-size: 0.7rem;
        }
      }

      .count-box {
        height: 70rpx;
        position: absolute;
        right: 20rpx;

        .number {
          text-align: right;
          width: 300rpx;
        }
      }
    }
  }

  .number-box {
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 0.85rem;
    position: relative;
    margin: 30rpx 0;

    .count {
      position: absolute;
      right: 0;
    }
  }

  .specs {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;

    .li {
      width: 100%;
      display: flex;
      flex-direction: column;

      .title {
        font-weight: 700;
        font-size: 0.9rem;
        color: #1a1a1a;
        margin-bottom: 20rpx;
      }

      .item-box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 50rpx;
        font-size: 0.7rem;

        .item {
          width: 25%;
          padding: 15rpx 0;
          border-radius: 20rpx;
          border: 0.0625rem solid rgb(230, 230, 230);
          background-color: rgb(245, 245, 245);
          color: rgb(38, 38, 38);
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .item1 {
          border: 0.0625rem solid rgb(204, 224, 255);
          background-color: rgb(235, 242, 255);
          color: rgb(1, 99, 255);
        }
      }
    }
  }
}

.button-box {
  width: 100vw;
  display: flex;
  justify-content: center;
  margin-top: 50rpx;
  .button {
    width: 90%;
    height: 85rpx;
    background-color: #40a9ff;
    color: #fff;
    border-radius: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>

<style lang="scss">
.cost-box {
  width: 100%;
  background-color: #fff;
  margin-top: 20rpx;
  border-radius: 20rpx;

  .ul {
    width: 100%;
    box-sizing: border-box;
    padding: 20rpx;

    .li {
      height: 70rpx;
      position: relative;
      font-size: 0.85rem;

      > .price {
        position: absolute;
        right: 20rpx;
      }
    }
  }
}
</style>
